<!-- 券专区首页 -->
<template>
	<view class="container">
		<view :class="fixedClass ? 'header fixed' : 'header'">
			<!-- #ifdef MP-WEIXIN -->
			<view class="navBar" :style="{paddingTop:MenuButtonTop - 6 + 'px'}">
			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN -->
			<view class="navBar">
			<!-- #endif -->
				<view class="navBarLeft" @tap="goBack">
					<text class="yticon icon-zuo"></text>
					<text class="title">置享惠商城</text>
				</view>
				<!-- #ifndef MP-WEIXIN -->
				<view class="searchBox">
					<view class="search">
						<icon class="searchIcon" type="search" :size='16' color='#999'></icon>
						<input class="searchInp" type="text" confirm-type="search" v-model="keyword" placeholder="请输入商品名称" @confirm="search" />
					</view>
				</view>
				<!-- #endif -->
			</view>
	</view>
	
	<view class="banner">
		<!-- 轮播 -->
		<view class="carousel-section">
			<swiper class="carousel" circular autoplay :indicator-dots="true" indicator-color="rgba(255,255,255,.5)"
			 indicator-active-color="#ffffff">
				<swiper-item v-for="(item, index) in data.banner" :key="index" class="carousel-item" @click="navTo(item.ad_link)">
					<image class="carousel-image" lazy-load :src="item.ad_code" />
				</swiper-item>
			</swiper>
		</view>
		
		<view class="tabs">
			<view>品质精选</view>
			<view>快速送达</view>
			<view>优选严检</view>
			<view>售后无忧</view>
		</view>
	</view>
	
	<view class="goods-tabs">
		<view class="title">
			<view class="h6">折扣专区</view>
			<view class="a" @click="tabMove">更多 <text class="yticon icon-you"></text></view>
		</view>
		
		<discount :scrollTop="scrollTop" :discountList="discountList"></discount>
	</view>
		
		<view :class="fixedClass ? 'cateBox fixed' : 'cateBox'">
			<view class="cateList">
				<scroll-view class="scroll__view" scroll-x="true">
					<view class="list">
						<block v-for="(item,index) in data.cate_list" :key="index">
							<view class="item" @click="clickCate(index,item.cate_id)">
								<view :class="active === index?'active':''" class="item-text">
									{{item.cate_name}}
								</view>
							</view>
						</block>
					</view>
				</scroll-view>
			</view>
			<view class="cate" @tap="navTo('/mall/Ticket/IntegralCate')">
				<image src="../static/images/1dsfsa.png" mode=""></image>
				<text>分类</text>
			</view>
		</view>
		<view class="goods-list">
			<empty v-if="empty" :custom="true" src="/mall/static/images/no-goods.png" text="无相关商品"></empty>
			<goods-block :goodsList="goodsList" :ticket="true" :scrollTop="scrollTop"></goods-block>
			<uni-load-more class="loadMore" iconType="circle" :status="loadStatus" :contentText="contentText"></uni-load-more>
		</view>
		
		<footers></footers>
	</view>
</template>

<script>
	import empty from "@/components/empty/empty";
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	import goodsBlock from "@/components/tabsList/tabsList.vue"
	import discount from '@/components/discount/discount.vue'
	import footers from '@/components/shopFooter/shopFooter.vue'
	import {
		ticketShopList,
		ticketShopBasic
	} from '@/api/mall.js'
	export default {
		components: {
			uniLoadMore,
			goodsBlock,
			empty,
			discount,
			footers
		},
		data() {
			return {
				//#ifdef MP-WEIXIN
				MenuButtonTop: getApp().globalData.MenuButtonTop,
				//#endif
				active: 0,
				data: {},
				empty: false,
				loadStatus: "loading",
				contentText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多了"
				},
				ordersList: [],
				keyword: '',
				cid: 0,
				page: 1,
				limit: 10,
				goodsList: [],
				scrollTop: 0,
				
				discountList: [],
				
				fixedClass: false
			}
		},
		onLoad() {
			ticketShopBasic().then(res => {
				this.data = res.data
			})
			this.loadData()
			
			this.tabList();
			
			const scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
			if (document.querySelector('.banner') !== null && document.querySelector('.goods-tabs') !== null) {
				const heightBox = document.querySelector('.banner').clientHeight + document.querySelector('.goods-tabs').clientHeight
				if (scrollTop - heightBox > -24) {
					this.fixedClass = true
				} else {
					this.fixedClass = false
				}
			}
		},
		onPageScroll(e) {
			 this.scrollTop = e.scrollTop;
				if (document.querySelector('.banner') !== null && document.querySelector('.goods-tabs') !== null) {
					const heightBox = document.querySelector('.banner').clientHeight + document.querySelector('.goods-tabs').clientHeight
					if (e.scrollTop - heightBox > -24) {
						this.fixedClass = true
					} else {
						this.fixedClass = false
					}
				}
		},
		//加载更多
		onReachBottom() {
			if (this.loadStatus == "more")
				(this.loadStatus = "loading"), this.loadData();
		},
		methods: {
			goBack() {
				uni.navigateBack({
					
				})
			},
			
			// 折扣商品更多
			tabMove () {
				const cate = {
					cate_id: 5636,
					cate_name: "折扣专区",
					is_hot: 1,
				}
				uni.navigateTo({
					url:"./IntegralList?cate=" + JSON.stringify(cate)
				})
			},
			
			// 折扣商品
			tabList () {
				ticketShopList({
					page: 1,
					limit: 10,
					cate_id: 5636
				}).then(res => {
					if(res.status === 200) {
						res.data.forEach(item => {
							item.amount = item.price.toString().split('.')[0]
							item.zero = item.price.toString().split('.')[1]
						})
						this.discountList = res.data
					}
				})
			},
			
			loadData() {
				ticketShopList({
					page: this.page,
					limit: this.limit,
					search_str: "",
					cate_id: this.cid
				}).then(res => {
					this.loadStatus = "more";
					this.goodsList.push.apply(this.goodsList, res.data);
					if (res.data.length < this.limit) this.loadStatus = "noMore"; //判断所有数据是否加载完成；
					this.page = this.page + 1;
					if (this.goodsList.length == 0) {
						this.empty = true
						this.contentText.contentnomore = ''
					}
				})
			},
			search() {
				uni.navigateTo({
					url: "./IntegralList?keyword=" + this.keyword
				})
			},
			clickCate(index, id) {
				this.active = index
				this.cid = id
				this.loadStatus = "loading";
				this.page = 1;
				this.goodsList = [];
				this.empty = false
				this.loadData()
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	.container {
		.header {
			background: linear-gradient(31deg, #FD6060 0%, #FB3C3C 100%);
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 9;
			.navBar{
				height: 44px;
				line-height: 44px;
				//#ifdef APP-PLUS
				padding: var(--status-bar-height) 30rpx 0;
				//#endif
				//#ifdef H5
				padding: 0 30rpx;
				//#endif
				//#ifdef MP-WEIXIN
				padding-left:30rpx;
				padding-right:30rpx;
				//#endif
				display: flex;
				justify-content: space-between;
				.navBarLeft{
					font-size: 36rpx;
					font-weight: bold;
					align-items: center;
					position: relative;
					color: #fff;
					.yticon{
						font-weight: normal;
						font-size: 36rpx;
						background-color: rgba(255, 255, 255, .5);
						position: absolute;
						height: 42rpx;
						top: 50%;
						transform: translateY(-50%);
						line-height: 46rpx;
						width: 70rpx;
						left: -30rpx;
						display: flex;
						align-items: center;
						justify-content: flex-end;
						border-bottom-right-radius: 24rpx;
						border-top-right-radius: 24rpx;
					}
					.title {
						margin-left: 65rpx;
					}
				}
				.navBarRight{
					display: flex;
					align-items: baseline;
					.title{
						font-size: 32rpx;
						font-weight: 500;
						color: #fff;
					}
				}
			}
			

			.searchBox {
				position: relative;
				z-index: 3;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.search {
					position: relative;
					flex: 1;

					.searchIcon {
						position: absolute;
						left: 20rpx;
						top: 0;
						height: 100%;
						display: flex;
						align-items: center;
					}

					.searchInp {
						width: 100%;
						height: 58rpx;
						padding-left: 80rpx;
						font-size: 28rpx;
						box-sizing: border-box;
						background: #FAF9F3;
						border-radius: 36rpx;
					}
				}
				.navBarRight{
					padding-left: 40rpx;
					display: flex;
					align-items: baseline;
					.title{
						font-size: 32rpx;
						font-weight: 500;
						color: #fff;
					}
				}
			}
		}
		
		.banner {
			background: linear-gradient(31deg, #FD6060 0%, #FB3C3C 100%);
			padding: 100rpx 15px 0;
			
			/* 轮播 */
			.carousel-section {
				position: relative;
				z-index: 2;
			
				.carousel {
					background-color: #fafafa;
					width: 100%;
					border-radius: 10rpx;
					box-sizing: border-box;
					overflow: hidden;
					height: 260rpx;
			
					.carousel-item {
						width: 100%;
						height: 100%;
						// padding: 0 28rpx;
						overflow: hidden;
					}
			
					.carousel-image {
						width: 100%;
						height: 100%;
					}
				}
			}
			
			.tabs {
				display: flex;
				align-items: center;
				padding: 25rpx 30rpx;
				justify-content: space-between;
				
				view {
					font-size: 22rpx;
					color: #ffffff;
				}
			}
		}
		
		.goods-list {
			padding: 30rpx 30rpx 110rpx 30rpx;
		}
	
		.cateBox {
			display: flex;
			align-items: center;
			margin: 0 30rpx;
			&.fixed {
				position: fixed;
				top: 80rpx;
				left: 0;
				box-sizing: border-box;
				width: 100%;
				margin: 0;
				padding: 20rpx 30rpx;
				color: #FFFFFF;
				z-index: 15;
				background: linear-gradient(31deg, #FD6060 0%, #FB3C3C 100%);
			}
			.cateList {
				width: 1%;
				flex: 1 1 auto;
				.list {
					display: flex;
					.item {
						margin-right: 45rpx;
						.item-text {
							white-space: nowrap;
							display: flex;
							align-items: center;
							font-size: 26rpx;
							&.active {
								font-size: 30rpx;
								font-weight: bold;
							}
						}
					}
				}
			}
		
			.cate {
				display: flex;
				align-items: center;
				uni-image {
					width: 40rpx;
					height: 20rpx;
				}
			}
		}
	
		.goods-tabs {
			background-color: #ffffff;
			margin: 30rpx;
			display: flex;
			flex-direction: column;
			border-radius: 10rpx;
			padding: 20rpx;
			.title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 30rpx;
				
				.h6 {
					font-size: 30rpx;
				}
				.a {
					color: #ccc;
					font-size: 24rpx;
					display: flex;
					align-items: center;
					
					.yticon {
						position: relative;
						top: 3rpx;
						margin-left: 5rpx;
					}
				}
			}
		}
	}

	/deep/.empty-content {
		position: relative !important;
	}
</style>
